<template>
  <div
    class="login-container"
    v-loading.fullscreen.lock="loading"
    element-loading-text="登录中"
  >
    <div class="login-page">
      <h3>账户登录</h3>
      <el-form
        size="large"
        :model="dataForm"
        :rules="dataRule"
        ref="loginForm"
        @keyup.enter="dataFormSubmit(loginForm)"
        status-icon
      >
        <el-form-item prop="username">
          <el-input v-model="dataForm.username" placeholder="帐号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="dataForm.password"
            type="password"
            placeholder="密码"
          />
        </el-form-item>
        <!-- <el-form-item prop="captcha">
          <el-row :gutter="20">
            <el-col :span="14">
              <el-input v-model="dataForm.captcha" placeholder="验证码" />
            </el-col>
            <el-col :span="10">
              <el-image
                :src="captchaPath"
                @click="initCaptcha()"
                style="cursor: pointer; float: right; margin-top: -1px"
                fit="fill"
              />
            </el-col>
          </el-row>
        </el-form-item> -->
        <el-form-item>
          <el-button
            class="login-btn-submit"
            type="primary"
            @click="dataFormSubmit(loginForm)"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { UUID } from "@/utils/index";
import admin from "@/utils/admin";
import http from "@/utils/httpRequest";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import type { FormInstance } from "element-plus";

const router = useRouter();

const loading = ref(false);

const dataForm = reactive({
  username: "admin",
  password: "admin",
  uuid: "test",
  captcha: "test",
});

const dataRule = reactive({
  username: [{ required: true, message: "帐号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  // captcha: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
});

const captchaPath = ref("");

// 组件挂载完成后执行
onMounted(() => {
  // 1. 获取验证码
  initCaptcha();
});

// 提交表单
const loginForm = ref<FormInstance>();
const dataFormSubmit = (form: FormInstance | undefined) => {
  if (!form) {
    return;
  }
  form.validate((valid) => {
    if (valid) {
      loading.value = true;
      http
        .post({
          url: "/auth/login",
          data: {
            username: dataForm.username,
            password: dataForm.password,
            uuid: "test",
            captcha: "test",
          }
        })
        .then(({data}) => {
          loading.value = false;
          if (http.success(data, false)) {
            admin.userInfo(data.body);
            router.replace({ name: 'admin' });
          } else {
            initCaptcha();
            ElMessage.error(data.msg)
          }
        })
    }
  });
};

// 获取验证码
const initCaptcha = () => {
  dataForm.captcha = "";
  dataForm.uuid = UUID();
  captchaPath.value = http.adornUrl(`/auth/captcha.jpg?uuid=${dataForm.uuid}`);
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 480px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>
